<template>
  <div class="newinfo">
    <van-nav-bar title="今日头条" @click-left="clickLeft" @click-right="clickRight">
      <van-icon name="arrow-left" slot="left" />
      <van-icon name="ellipsis" slot="right" />
    </van-nav-bar>
    <div class="new-con">
      <h1 class="title">{{info.title}}</h1>
      <van-row class="author">
        <van-col span="2" class="head-pro">
          <img src="./info/head-1101.jpg" alt />
        </van-col>
        <van-col span="17" offset="1">
          <div class="auth-name">{{info.media_name}}</div>
          <div class="auth-acc">
            <van-tag v-if="infoTag!==''" plain>{{infoTag}}</van-tag>
            <span>{{getTime(info.datetime)}}</span>
            <!-- {{infoAccount}} -->
          </div>
        </van-col>
        <van-col span="3">
          <van-button type="danger" size="mini">关注</van-button>
        </van-col>
      </van-row>
      <div class="article">
        <div class="art-con">{{info.abstract}}</div>
        <template v-if="info.img_list">
          <div v-for="item in JSON.parse(info.img_list)" :key="item.index">
            <img :src="item.url" alt />
            <!-- <p>{{item}}</p> -->
          </div>
        </template>

        <div class="art-foot">
          <p>留言</p>
          <p>你脑海中的希腊是什么颜色</p>
          <p>我们欢迎「古怪却精准」的描述</p>
          <img src="./info/article-1101-1.jpg" alt />
        </div>
      </div>
    </div>
    <comment :id="id" :refreshcom="refreshcom" ref="recom"></comment>
    <operation :id="id" @refreshCom="refreshCom"></operation>
  </div>
</template>
<script>
import Comment from '@/components/Comment'
import Operation from '@/components/Operation'
export default {
  data: () => ({
    id: '',
    refreshcom: false,
    info: {}
  }),
  created () {
    this.id = this.$route.params.id
    this.getInfo()
  },
  methods: {
    async getInfo () {
      const { data: { status, data } } = await this.$http.get('/api/getnews/' + this.id)
      if (status !== 0) {
        return this.$Toast('错误')
      }
      this.info = data[0]
    },
    getTime (time) {
      return this.getFormate(time)
    },
    clickLeft () {
      history.go(-1)
    },
    clickRight () {
      console.log('是分享')
    },
    refreshCom (refresh) {
      // 发表评论后更新评论
      this.refreshcom = refresh
      this.$refs.recom.reComment(refresh)
    }
  },
  computed: {
    infoTag () {
      return this.info.label || ''
    },
    infoAccount () {
      return this.info.msg.account || ''
    }
  },
  components: { Comment, Operation }
}
</script>
<style lang="less" scoped>
.newinfo {
  padding:46px 0 50px 0;
  .van-nav-bar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff !important;
    border-bottom: 1px solid #ccc;
    .van-icon {
      font-size: 26px;
      color: #222;
    }
  }
  .new-con {
    padding: 0 10px;
    .title {
      margin: 10px 0 20px;
      font-family: "PingFangSC-Medium";
      font-weight: 500;
      color: #222222;
      font-size: 18px;
    }
    .author {
      margin-bottom: 10px;
      .head-pro {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .auth-name {
        margin-bottom: 10px;
        font-weight: 600;
      }
      .auth-acc {
        font-size: 12px;
        color: #505050;
      }
    }
    .article {
      img {
        width: 100%;
      }
      .art-con {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
      }
      .art-foot {
        color: #222;
      }
    }
  }
}
</style>
